<template>
  <div class="app-container search-list">
    <table-pagination
        ref="el-search-table"
        :fetch="getData"
        type="remote"
        :page-sizes="[20, 50, 100]"
        :columns="columns"
        :form-options="formOptions"
        :adaptive = "fixOption"
        height="100px"
        list-field="records"
        total-field="totalElements"
        page-index-key="page"
        page-size-key="pageSize"
        method="get">
      <template slot="button">
        <el-button size="small" type="primary" icon="el-icon-circle-plus" @click="handleAdd">新增店铺</el-button>
        <el-button size="small" type="primary" icon="el-icon-circle-plus" @click="handleCopy">复制店铺</el-button>
      </template>
      <el-table-column label="操作" slot="append" width="200px">
        <template slot-scope="scope">
          <el-button plain size="mini" type="primary" @click="handleEdit(scope.row.id)">修改</el-button>
          <el-button plain size="mini" type="info" @click="handleOpen(scope.row)">跳转到此店铺</el-button>
        </template>
      </el-table-column>
    </table-pagination>
  </div>
</template>

<script>
import {mapGetters} from 'vuex';
import {utcFormat} from '@/utils/filters';
import TablePagination from '_c/Tables/table-pagination';
import { getSitePage } from '@/api/site';
import store from '@/store';
import {getDynamicSiteId} from '@/utils/auth';
export default {
    name: 'site-list',
    components: {
        TablePagination
    },
    data () {
        return {
            fixOption: {fixedHeader: true},
            list: null,
            listLoading: true,
            loadingBtn: false,
            pageParams: {
                page: 1,
                pageSize: 20,
                name: ''
            },
            formOptions: {
                showResetBtn: true,
                inline: false,
                labelWidth: 120,
                submitBtnText: '查询',
                size: 'small',
                resetBtnCallback: () => {
                    this.$refs['el-search-table'].fetchHandler(this.pageParams, false);
                },
                forms: [
                    { prop: 'name', label: '店铺名称', placeholder: '请输入店铺名称' }
                ]
            },
            columns: [
                {label: '店铺名称', prop: 'name'},
                {label: '域名', prop: 'domain'},
                {label: '管理员', prop: 'adminEmail'},
                // {label: '拥有权限',
                //     prop: 'adminId',
                //     render: row => {
                //         const { adminId } = row;
                //         if (adminId === this.userId) {
                //             return '管理员';
                //         }
                //         return '员工';
                //     }},
                {label: '创建时间',
                    prop: 'createDate',
                    render: row => {
                        return utcFormat(row.createDate, 'YYYY-MM-DD HH:mm:ss', this.timeZone);
                    }}
            ],
            tableData: []
        };
    },
    methods: {
        getData (params) {
            return new Promise((resolve, reject) => {
                getSitePage({...this.pageParams, ...params}).then((res) => {
                    resolve(res);
                });
            });
        },
        handleAdd () {
            this.$router.push({name: 'site-add'});
        },
        handleCopy () {
            this.$router.push({name: 'site-copy'});
        },
        handleEdit (id) {
            this.$router.push({name: 'site-edit', params: {id}});
        },
        handleOpen (val) {
            this.$store.commit('SET_DYNAMIC_SITE_ID', {name: val.name, id: val.id});
            window.open('#/' + `?siteName=${val.name}`, '_blank');
        }
    },
    computed: {
        ...mapGetters(['timeZone']),
        userId () {
            return this.$store.state.user.userId;
        }
    }
};
</script>
